<template>
  <el-upload
    v-model="fileList"
    action="http://127.0.0.1:8081/cum/minio/upload"
    :on-success="handleSuccess"
    :on-error="handleError"
    :before-upload="beforeUpload"
    :on-change="handleChange"
    :file-list="fileList"
    :on-progress="uploadProgress"
    crossorigin="anonymous"
  >
    <el-button type="primary">选择文件</el-button>

    <div v-if="uploadPercentage !== 0" class="progress-container">
      <el-progress :percentage="uploadPercentage" :status="uploadStatus"></el-progress>
    </div>

  </el-upload>
</template>

<script>
import { ElButton, ElProgress, ElUpload } from 'element-plus'

//   import { ref } from 'vue';
export default {
  data () {
    return {
      fileList: [],
      // 允许上传的文件类型
      fileTypeList: [
        'png',
        'jpg',
        'jpeg',
        'gif',
        'slx',
        'xlsx',
        'doc',
        'docx',
        'pdf'
      ],
      uploadPercentage: 0, // 上传进度百分比

    }
  },
  methods: {
    handleSuccess (response, file, fileList) {
      console.log('文件上传成功')
      console.log(response, file, fileList)
      // 处理上传成功的逻辑
    },
    handleError (err, file, fileList) {
      console.log('文件上传失败')
      // 处理上传失败的逻辑
      console.log(err, file, fileList)
    },
    beforeUpload (file) {
      // 可以在上传前对文件进行校验
      console.log('文件上传前')
      console.log(file.name)
      return true // 返回 false 则停止上传
    },
    handleChange (file, fileList) {
      // 文件状态变化时的钩子
      console.log('文件状态变化')
      console.log(file, fileList)
    },
    submitUpload () {
      // 可以在这里调用 API 进行文件上传
    }
  },
  components: { ElUpload, ElButton, ElProgress }
}
</script>
